import React, { Component } from 'react';
import { connect } from 'react-redux';
import { CommonTable } from 'components';
import { bindActionCreators } from 'redux';
import { Icon } from 'antd';
import { phoneUrgeListAction } from './index';
import SearchList from './SearchList/SearchList';
import styles from './PhoneUrgeList.less';
import moment from "moment/moment";

const convertParams = (obj) => {
    const { time, phoneNo, name, orderNo, orderStatus, person } = obj;
    const isArr = Array.isArray(time) && time.length > 0;
    return {
        fstartTime: isArr ? time[0].format('YYYY-MM-DD HH:mm:ss') : '',
        fendTime: isArr ? time[1].format('YYYY-MM-DD HH:mm:ss') : '',
        status: orderStatus,
        userPhone: phoneNo,
        userTrueName: name,
        orderNo,
        isDc: true
    };
}
const statusObj = {
    "0": '逾期中',
    "1": '已结清',
    "2": '已展期'
}

class PhoneUrgeList extends  Component{
    constructor(props) {
        super(props);
        this.state = {};
        const _this = this;
        this.columns = [
            {
                title: '分配时间',
                dataIndex: 'distributionTime',
                key: 'distributionTime',
                render(text) {
                    return moment(Number(text) * 1000).format('YYYY-MM-DD HH:mm:ss');
                }
            },
            { title: '订单号', dataIndex: 'orderNo', key: 'orderNo' },
            { title: '姓名', dataIndex: 'userTrueName', key: 'userTrueName' },
            { title: '手机号', dataIndex: 'userPhone', key: 'userPhone' },
            { title: '逾期天数', dataIndex: 'expireDays', key: 'expireDays' },
            {
                title: '逾期时间',
                dataIndex: 'expireTime',
                key: 'expireTime',
                render(text) {
                    return moment(Number(text) * 1000).format('YYYY-MM-DD HH:mm:ss');
                }
            },
            { title: '借款金额', dataIndex: 'lendMoney', key: 'lendMoney' },
            {
                title: '订单状态',
                dataIndex: 'status',
                key: 'status',
                render(text) {
                    return statusObj[text] || '';
                }
            },
            { title: '应还金额', dataIndex: 'payable', key: 'payable' },
            // { title: '跟进记录', dataIndex: 'record', key: 'record' },
            // { title: '最后跟进时间', dataIndex: 'lastRecordTime', key: 'lastRecordTime' },
            {
                title: '操作',
                dataIndex: 'id',
                key: 'id',
                render(text, record) {
                    const { userId } = record;
                    return (
                        <div onClick={() => _this.handleLookDetail(text, userId)} className={styles.operatorWrapper}>
                            <Icon type="exception" />
                        </div>
                    );
                }
            }
        ];
    }

    //查看详情
    handleLookDetail = (id, userId) => {
        const { history: { push } } = this.props;
        push(`/phoneUrgeList/${id}`, { userId });
    }

    //搜索
    handleSubmit = (obj) => {
        const { setSearchParams, getTableData } = this.props;
        setSearchParams(obj);
        const params = convertParams(obj);
        getTableData({ ...params, pageNum: 1, pageSize:10 });
    }
    //分页
    handlePageChange = (info) => {
        const { pageSize, current } = info;
        const { getTableData, searchParams } = this.props;
        const params = convertParams(searchParams);
        getTableData({ ...params, pageSize, pageNum: current });
    }

    componentDidMount() {
        const { getTableData, tableData: { pagination }, searchParams } = this.props;
        let params = convertParams(searchParams);
        params = { ...params, pageSize: pagination['pageSize'] || 10, pageNum: pagination['current'] || 1 };
        getTableData(params);

    }
    render() {
        const { tableData: { data, pagination }, loading, searchParams } = this.props;
        console.log(searchParams);
        return (
            <div>
                <SearchList handleSubmit={this.handleSubmit} params={searchParams}/>
                <CommonTable
                    columns={this.columns}
                    dataSource={data}
                    pagination={pagination}
                    handlePageChange={this.handlePageChange}
                    loading={loading}
                />
            </div>
        );
    }
}
const mapStateToProps = (state) => {
    const { afterLoanManageState: { phoneUrgeListState } } = state;
    return {
        tableData: phoneUrgeListState['tableData'],
        loading: phoneUrgeListState['loading'],
        searchParams: phoneUrgeListState['params']
    };
};
const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        getTableData: phoneUrgeListAction.pulGetTableData,
        setTableData: phoneUrgeListAction.pulSetTableData,
        setSearchParams: phoneUrgeListAction.pulChangeSearchParams
    }, dispatch);
}


export default connect(mapStateToProps, mapDispatchToProps)(PhoneUrgeList);